<template>
	<div class="Input">
		<input
			:style="{
				'background-color': bgColor,
				'border': border,
				'color': color
			}"
			:type="type"
			:value="value"
			:placeholder="placeholder"
			@input="$emit('input', $event.target.value)"
		>
	</div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#eff3f3'
    },
    color: {
      type: String,
      default: '#003E34'
    },
    border: {
      type: String,
      default: '3px solid transparent'
    }
  }
}
</script>

<style lang="scss" scoped>
.Input {
  input {
    box-sizing: border-box;
    width: 100%;
    padding: 17px 18px;
    font-size: 22px;
    border-radius: $rMiddle;
    outline: none;

    &:focus {
      border-color: #00c9a9 !important;
    }
  }
}
</style>
